<template>
<div id ="teamPage">
  <van-search v-model="searchText" placeholder="搜索队伍" @search="onSearch"/>
  <van-tabs v-model:active="active" @change="onTabChange">
    <van-tab title="公开" name="public"/>
    <van-tab title="私密" name="private"/>
  </van-tabs>
  <team-card-list :teamList = "teamList"/>
  <van-empty v-if="teamList?.length < 1" description="数据为空"/>
</div>
  <div class="add-button">
    <van-button round type="success" class="add-button" icon="plus" @click="toAddTeam"/>
  </div>
</template>
<script setup lang="ts">
import {useRouter} from "vue-router";
import {onMounted,ref} from "vue";
import TeamCardList from "../components/TeamCardList.vue";
import myAxios from "../plugins/myAxios";
import {showFailToast,Toast} from "vant";
import 'vant/es/toast/style';
const router = useRouter();
const active = ref('public')
const searchText = ref('');


//跳转加入队伍界面
const toAddTeam = () =>{
  router.push({
    path :"/team/add"
  })
}
  const teamList = ref([]);
  onMounted(async() =>{
    const res = await myAxios.get("/team/list")
    if(res?.code === 0){
      teamList.value = res.data;
    }else{
      showFailToast("加载队伍失败，重新刷新")
    }
  })

/**
 * 切换查询状态
 */
const onTabChange = (name) =>{
  //查公开
  if(name == 'public'){
    listTeam(searchText.value,0);
  }else{
    //查加密
    listTeam(searchText.value,2);
  }
}
/**
 * 搜索队伍
 * @param val
 * @returns {Promise<void>}
 */
const listTeam = async (val = '',status=0) => {
  const res = await myAxios.get("/team/list", {
    params: {
      searchText: val,
      pageNum: 1,
      status
    },
  });
  if (res?.code === 0) {
    teamList.value = res.data;
  } else {
    showFailToast('加载队伍失败，请刷新重试');
  }
}
//页面加载时触发一次，查询队伍
onMounted(() =>{
  listTeam()
})

//搜索
const onSearch = (val) =>{
  listTeam(val)
}

</script>

<style scoped>

</style>
